<template>
  <el-header class="header-bg">
    <div class="menu-left">
      <div class="img-content"><img :src="logo" alt="logo"></div>
      <span>商户平台</span>
    </div>
    <div class="ll">
      <el-menu :default-active="currentPage" class="menu-content headerWidthP" mode="horizontal" @select="handleSelect" text-color="#fff" active-text-color="#fff">
        <el-menu-item class="headerWidth" @click="clicked(index)" :index="item.title" v-for="(item, index) in privilegeTree" :key="index" v-if="item.title != '个人中心'" v-text="item.title"></el-menu-item>
      </el-menu>
    </div>
    <div class="menu-right">
      <img class="headerImg" :src="headUrl || default_head" alt="">
      <el-dropdown click="user-item" trigger="click" @command="goPersonalCenter">
        <span class="el-dropdown-link">
          {{linkName || mobile}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item disabled>
            <div>当前登陆：</div>
            <div>{{this.companyName}}</div>
          </el-dropdown-item>
          <el-dropdown-item divided command='/home/select-model'>切换商户</el-dropdown-item>
          <el-dropdown-item command='/home/personal-center'>个人中心</el-dropdown-item>
          <el-dropdown-item command="signOut">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-header>
</template>
<script>
import logo from "assets/images/logo.png";
import { mapState } from "vuex";
import util from "src/util";
import Cookies from "js-cookie";
import default_head from "assets/images/default_head.png";

export default {
  computed: mapState([
    "privilegeTree",
    "currentPage",
    "headUrl",
    "userName",
    "companyName",
    "mobile",
    "linkName"
  ]),
  data() {
    return {
      default_head: default_head,
      logo: logo,
      width: 0
    };
  },
  watch: {
    currentPage: {
      handler: function(val, oldVal) {
        if (val != oldVal) {
          this.$store.commit("SET_ASIDEISCLICK", false);
        }
      },
      deep: true
    }
  },
  mounted() {
    var divs = document.querySelectorAll(".headerWidth");
    var width = 0;
    for (var i = 0; i < divs.length; i++) {
      var lastW = divs[i].clientWidth;
      width += lastW;
    }
    document.querySelector(".headerWidthP").style.width = width + 10 + "px";
  },
  methods: {
    signOut() {
      Cookies.remove(process.env.COOKIE_NAME + "_companyName");
      Cookies.remove(process.env.COOKIE_NAME + "_isFirstLogin");
      Cookies.remove(process.env.COOKIE_NAME + "_isShop");
      Cookies.remove(process.env.COOKIE_NAME + "_linkName");
      Cookies.remove(process.env.COOKIE_NAME + "_merchantId");
      Cookies.remove(process.env.COOKIE_NAME + "_token");
      Cookies.remove(process.env.COOKIE_NAME + "_userInfo");
      Cookies.remove(process.env.COOKIE_NAME + "_soUrce");
      Cookies.remove(process.env.COOKIE_NAME + "_isOwnAuth");
      Cookies.remove(process.env.COOKIE_NAME + "_businessScope");
      location.reload();
    },
    goPersonalCenter(command) {
      if (command == "signOut") {
        this.signOut();
      } else {
        // 选择个人中心/切换商户时 大菜单取消选中
        this.$store.commit("SET_CURRENTPAGE", "");
        util.routerTo(command);
      }
    },
    handleSelect(key, keyPath) {
      if (key != this.currentPage) {
        this.$store.commit("SET_CURRENTPAGE", key);
        this.setmenu(true);
      }
    },
    clicked(index) {
      var target = document.querySelector(".ll");
      var divs = document.querySelectorAll(".headerWidth");
      var width = 0;
      for (let i = 0; i < index; i++) {
        width += divs[i].clientWidth;
      }
      if (index > 2) {
        animateScroll(target, 20, width);
        // document.querySelector('.ll').scrollLeft = width
      } else {
        animateScroll(target, 20, 0);
        // document.querySelector('.ll').scrollLeft = 0
      }

      function animateScroll(element, speed, length) {
        let left = length;
        let currentLeft = document.querySelector(".ll").scrollLeft;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step() {
          if (length == 0) {
            currentLeft -= speed;
            if (currentLeft > left) {
              document.querySelector(".ll").scrollLeft = currentLeft;
              requestId = window.requestAnimationFrame(step);
            } else {
              window.cancelAnimationFrame(requestId);
            }
          } else {
            currentLeft += speed;
            if (currentLeft <= left) {
              document.querySelector(".ll").scrollLeft = currentLeft;
              requestId = window.requestAnimationFrame(step);
            } else {
              window.cancelAnimationFrame(requestId);
            }
          }
        }
        window.requestAnimationFrame(step);
      }
    },
    setmenu(bool) {
      for (let i = 0; i < this.privilegeTree.length; i++) {
        if (this.privilegeTree[i].title == this.currentPage) {
          this.$store.commit("SET_MENUINDEX", this.privilegeTree[i].children);
          let o = this.privilegeTree[i].children;
          if (o[0].children[0].isLeafnode == 1) {
            if (bool) {
              this.$store.commit(
                "SET_DEFAULTASIDEACTIVE",
                o[0].children[0].title
              );
              util.routerTo(o[0].children[0].menuUrl);
            }
          } else {
            if (bool) {
              this.$store.commit("SET_DEFAULTASIDEACTIVE", o[0].title);
              util.routerTo(o[0].menuUrl);
            }
          }
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.header-bg {
  width: 100%;
  display: flex;
  flex-direction: row;
  background-image: url("../assets/images/navbar.png");
  background-size: 100% 100%;
  .menu-left {
    width: 140px;
    height: 100%;
    margin-left: 50px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    .img-content {
      height: 70%;
      margin-top: -4px;
      img {
        height: 35px;
        margin-top: 8px;
      }
    }
  }
  .ll {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    .menu-content {
      background-color: transparent !important;
      .el-menu-item.is-active {
        background-color: rgba(2, 125, 197, 1) !important;
      }
      .el-menu-item {
        font-size: medium;
        background-color: transparent !important;
      }
    }
  }
  .ll::-webkit-scrollbar {
    display: none;
  }
  .menu-right {
    min-width: 200px;
    line-height: 55px;
    // position: absolute;
    padding-left: 30px;
    right: 30px;
    display: flex;
    flex-direction: row;
    .el-dropdown {
      flex: 1;
      text-align: left;
      font-size: initial;
      color: #fff;
      text-indent: 20px;
    }
    .el-dropdown-link {
      cursor: pointer;
    }
    .headerImg {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      overflow: hidden;
      position: relative;
      top: 10px;
      background-color: #fff;
    }
  }
}
</style>
